<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    Vue3 起步

      1. 页面需要有一个挂载点元素
      2. 引入 Vue3 类库
      3. 创建 应用

   -->

    <div id="app">
      <h1>{{ msg }}</h1>
    </div>

    <script src="../lib/vue-3.js"></script>
    <script>
      // 创建 Vue 应用实例
      const app = Vue.createApp({
        // 组件的选项配置
        data() {
          return {
            msg: "hello vue",
          };
        },

        // data: {
        //   msg: "Hello Vue3",
        // },

        methods: {
          fn1: function () {
            console.log("fn1");
          },

          fn2() {
            console.log("fn2");
          },

          fn3: () => {
            // 不要使用 箭头函数，this 指向会有问题
          },
        },
      });

      // 使用 app.mount() 来挂载应用到 挂载点上
      console.log("app", app);
      app.mount("#app");

      // 起步与Vue2的区别：

      // 1. Vue2 使用 new Vue。 Vue3 使用 createApp()
      // 2. Vue2 中 new Vue 有一个 el 配置项，Vue3 没有 el 配置项
      // 3. Vue2 中 new Vue 的 data 选项可以是一个对象或一个函数返回对象，而Vue3中data选项必须是一个函数返回对象的形式

      // PS: Vue2 中的 组件的 data 选项必须是一个函数返回对象的原因是什么？
    </script>
  </body>
</html>
